<template>
    <div>
      <div class="box common_bg_fff">
        <div class="list">
          <span class="font_333_30">联系人：</span>
          <input type="text" class="font_666_30" v-model="userName">
        </div>
        <div class="list">
          <span class="font_333_30">联系电话：</span>
          <input type="number" class="font_666_30" v-model="userPhone" :placeholder="placeholderText">
        </div>
        <div class="list">
          <span class="font_333_30">所在地区：</span>
          <!--<input type="text" class="font_666_30" v-model="userAdress">-->
          <!--<popup-picker :data="adressLIST" v-model="userAdress_value" @on-change="AdressonChange"  class="font_666_30 picker" :columns="columns"></popup-picker>-->
          <div class="pickerBOX">
            <popup-picker :data="adressLIST" v-model="userAdress_value" @on-change="AdressonChange"  class="font_666_30 picker" :columns="columns"></popup-picker>
            <i class="iconfont icon-jiantouyou"></i>
          </div>
        </div>
        <div class="adress">
          <textarea v-model="userAdress_detail" class="font_666_30" placeholder="详细地址"></textarea>
        </div>
      </div>
      <div class="btn font_fff_36" @click="isok">确定</div>

      <toast v-model="showPositionValue" type="text" :time="1500" is-show-mask :text="toastText" position="middle"></toast>
    </div>
</template>

<script>
  import { PopupPicker, Toast} from 'vux'
  import lu from '../../assets/public.js'
    export default {
        name: '',
        components: {
          PopupPicker,
          Toast
        },
        data() {
            return {
              title:'编辑地址',
              columns:2,
              userName:'',
              userPhone:'',
              placeholderText:'',
              adressLIST:[],
              userAdress:'',
              userAdress_value:['请选择'],
              editID:null,
              userAdress_detail:'',
              /*toastText*/
              toastText:'',
              showPositionValue:false,
            }
        },
        created () {
          this.setTitle(this.title)
          this.axios.post('/home/Address/getStreet',{token:this.$store.state.token,}).then((res)=>{
            if(res.data.code==200){
              let data = res.data.data
              for(let key in data){
                let obj = {
                  name:data[key].district,
                  value:data[key].district,
                  parent:0
                }
                this.adressLIST.push(obj)
                let ds = data[key].child
                for(let value in ds){
                  let obj2 = {
                    name:ds[value],
                    value:ds[value],
                    parent:data[key].district
                  }
                  this.adressLIST.push(obj2)
                }
              }
            }
          })
        },
        mounted: function () {
          if(this.$route.params.id){
            this.editID = this.$route.params.id
            this.axios.post('/home/Address/addressDetail',{
              token:this.$store.state.token,
              address_id:this.$route.params.id
            }).then((res)=>{
              if(res.data.code==200){
                this.userName = res.data.data.con_name
                this.userPhone = res.data.data.con_tel
                this.userAdress_value = []
                this.userAdress_value.push(res.data.data.address_dis.substring(0,3))
                this.userAdress_value.push(res.data.data.address_dis.substring(3))
                this.userAdress_detail = res.data.data.address_detail
              }
            })
          }
        },
        methods: {
          isok(){
            if(!this.userName||!this.userPhone||!this.userAdress||!this.userAdress_detail){
              this.toastText = '内容不完整'
              this.showPositionValue = true
              return
            }
            if(!lu.regCheck(this.userPhone, /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/)){
              this.placeholderText = '手机号码格式不正确'
              this.userPhone = ''
              return
            }
            if(this.editID){
              this.axios.post('/home/Address/editAddress',{
                token:this.$store.state.token,
                a_id:this.editID,
                name:this.userName,
                tel:this.userPhone,
                address_dis:this.userAdress,
                address_detail:this.userAdress_detail,
              }).then((res)=>{
                if(res.data.code==200){
//                  console.log(1)
                  this.$router.push('/recovery/ChooseAdress')
                }
              })
            }else{
              this.axios.post('/home/Address/addAddress',{
                token:this.$store.state.token,
                name:this.userName,
                tel:this.userPhone,
                address_dis:this.userAdress,
                address_detail:this.userAdress_detail,
              }).then((res)=>{
                if(res.data.code==200){
//                  this.$router.push('/recovery/ChooseAdress')
                  this.$router.push({
                    path:'/recoveryIndex',
                    name:'recoveryIndex',
                    params:{
                      showID:2
                    }
                  })
                }
              })
            }
          },
          AdressonChange(val){
            this.userAdress = val[0]+''+val[1]
          }
        }
    }
</script>

<style scoped>
  @import "../../assets/public.css";
  .box{
    padding: 0 .3rem;
    margin-top: .26rem;
  }
  .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:.82rem;
    border-bottom:1px solid #E6E6E6;
  }
  .pickerBOX{
    display: flex;
    align-items: center;
  }
  .picker{
    margin-right:.1rem;
  }
  .adress>textarea{
    width:100%;
    height:4.14rem;
    padding:.25rem;
    box-sizing: border-box;
    font-weight: 400;
  }
  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999;
    font-size:.30rem;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    font-size:.30rem;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;font-size:.30rem;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #999;font-size:.30rem;
  }
  input{
    height:.8rem;
    text-align: right;
    flex:1;
  }
  .btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: .82rem auto 0;
    border-radius: 5px;
  }
</style>
